<template>
	<view>
		<nav-bar title="驾驶员管理"></nav-bar>
		<view>
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in indexList" :key="item.id" @click="handleClickItem(item)">
					<uni-section>
						<up-cell-group :customStyle='groupStyle'>

							<view class="driver-list">
								<view class="driver-list-item">
									<!-- 名字电话flex横向布局 -->
									<view class="driver-list-item-row">
										<view class="driver-list-item-row-name">
											{{ item.drivername }}
										</view>
										<view class="driver-list-item-row-phone">
											{{ item.drivertel }}
										</view>
									</view>

									<view class="driver-list-item-content-title">
										{{ item.companyname }}
									</view>

									<view class="driver-list-item-content-tags">
										<view class="driver-list-item-content-tags-item1">
											<text>年审时间:{{ item.iddate }}</text>
										</view>
										<view class="driver-list-item-content-tags-item">
											<text>{{ item.drivetype }}</text>
										</view>
										<view class="driver-list-item-content-tags-item">
											<text>{{ item.jrstate }}</text>
										</view>
									</view>

								</view>
							</view>

						</up-cell-group>
					</uni-section>
				</up-list-item>
			</up-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
import NavBar from '@/components/NavBar.vue';
import { getDriverList } from '@/api/use';

	const indexList = ref([]);
	const currentPage = ref(1);
	const status = ref('loadmore'); 
	const nomoreText = ref('没有更多了');
	const noMore = ref(false);
	const groupStyle = ref({
		'background-color': '#fff'
	});

	onLoad(() => {
		loadmore();
	});

	const scrolltolower = () => {
		currentPage.value++;
		loadmore();
	};

	const loadmore = () => {
		serverDriverList()
	};

	function serverDriverList(){
			let params = {
				PZ:10,
				PN:currentPage.value,
				type:1,
			}
			getDriverList(params).then(res => {
				if(res.code === 1){
					if(currentPage.value === 1){
						indexList.value.splice(0);
					}
					// indexList.value = res.data.table;
					res.data.table.forEach(element => {
						indexList.value.push(element);
					});
					if(res.data.table.length<10){
						noMore.value=true
					}else{
						noMore.value=false
					}
				}else{
					noMore.value=false
				}
			})
		}

	
	//  点击列表项
	function handleClickItem(item) {
		console.log(item);
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/use/driver/detail/index?id=' + item.drid
		})

	}
</script>

<style lang="scss" scoped>
	.driver-list {
		padding: $uni-spacing-row-lg;

		&-item {

			&-row {


				display: flex;
				justify-content: space-between;
				color: #333;
				font-size: 15px;

				&-phone {
					font-size: 13px;
					color: #797E84;
				}
			}


			&-content {
				flex: 1;
				margin-left: $uni-spacing-row-lg;

				&-title {
					font-size: 13px;

					color: #797E84;
				}

				&-desc {
					margin-top: $uni-spacing-row-lg ;
					font-size: 13px;
					color: #999;
				}

				&-tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: $uni-spacing-row-lg;
					font-size: 13px;
					color: #97A5B5;
					&-item1 {
						margin-bottom: $uni-spacing-row-sm;
						margin-right: $uni-spacing-row-lg;
						padding: $uni-spacing-row-sm $uni-spacing-row-lg;
						background-color: #FDEBD1;
						border-radius: 15px;
					}
					&-item {
						margin-bottom: $uni-spacing-row-sm;
						margin-right: $uni-spacing-row-lg;
						padding: $uni-spacing-row-sm $uni-spacing-row-lg;
						background-color: #E8EBEE;
						border-radius: 15px;
					}
				}

				&-location {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #999;
					margin-top: $uni-spacing-row-sm;
				}


			}
		}
	}
</style>